<template>
  <div>
    <a-modal
      title="用户电池"
      :visible="visible"
      :confirm-loading="loading"
      :width="720"
      @ok="modalOK"
      @cancel="cancelModal"
    >
      <a-spin :spinning="loading">
        <a-form
          :form="form"
          v-bind="formLayout"
          @submit="formSubmit"
        >
          <a-form-item label="电池编号">
            <a-input v-model="batteryId" />
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { getUserBatteryList, deleteUserBattery, putUserBattery } from '@/api/users'
import moment from 'moment'

export default {
  name: 'UserBattery',
  data () {
    return {
      batteryId: '',
      loading: false,
      detailData: null,
      batteryList: [],
      formLayout: {
        labelCol: {
          span: 6
          // xs: { span: 24 },
          // sm: { span: 7 }
        },
        wrapperCol: {
          span: 18
          // xs: { span: 24 },
          // sm: { span: 13 }
        }
      },
      form: this.$form.createForm(this, { id: 10000 })
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    model: {
      type: Object,
      default: null
    }
  },
  watch: {
    visible (news, olds) {
      if (news) {
        this.init()
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      console.log(this.model)
      if (this.model && this.model.id) {
        getUserBatteryList(this.model.id).then(res => {
          this.batteryList = res.data
          if (res.data && res.data.length > 0) {
            this.batteryId = res.data[0].id
          } else {
            this.batteryId = ''
          }
        })
        return
      }
      this.batteryList = []
      // getMenuLists({ id: this.model.id }).then(res => {
      //   this.detailData = res[0]
      //   console.log(res)
      // }).catch(e => {
      //   console.error(e)
      // })
    },
    moment,
    range (start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },
    formSubmit () {

    },
    disabledDate (current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day')
    },
    disabledDateTime () {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [ 55, 56 ]
      }
    },
    modalOK () {
      this.form.validateFieldsAndScroll((error, values) => {
        if (!error) {
          if (this.batteryList.length > 0) {
            this.batteryList.forEach((item, index) => {
              deleteUserBattery(this.model.id, item.id)
              .then(res => {
                putUserBattery(this.model.id, this.batteryId).then(res => {
                  this.$emit('ok')
                  console.log('更新成功')
                }).catch(e => {
                  console.log('更新失败')
                })
              })
            })
          } else {
            putUserBattery(this.model.id, this.batteryId).then(res => {
              this.$emit('ok')
              console.log('更新成功')
            }).catch(e => {
              console.log('更新失败')
            })
          }
          // updateMenu(this.model.id, values).then(res => {
          //   this.$emit('ok')
          // }).catch(e => {
          //   console.error(e)
          // })
        }
      })
    },
    cancelModal () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
